<template>
  <div class="card">
    <h2 class="text-lg font-bold">经济总体运行态势</h2>
    <div class="grid grid-cols-1 gap-4">
      <div class="bg-white rounded-lg shadow p-3 pb-5 chart-container">
        <div class="flex justify-between">
          <p class="font-semibold mb-1">生产总值</p>
          <a-button type="primary" @click="generateGDPReport"
            >生成报告
            <a-modal v-model:visible="gdpModal" title="生产总值报告">
              <p>暂无数据...</p>
            </a-modal>
          </a-button>
        </div>
        <LineChart :data="gdpChartData" :options="gdpChartOptions" class="w-full h-48" />
      </div>
      <div class="bg-white rounded-lg shadow p-3 pb-5 chart-container">
        <div class="flex justify-between">
          <p class="font-semibold mb-1">产业结构趋势分析</p>
          <a-button type="primary" @click="generateIndustrialTrendAnalysisReport"
            >生成报告
            <a-modal v-model:visible="industryTrendAnalysisModal" title="产业结构趋势分析报告">
              <p>暂无数据...</p>
            </a-modal>
          </a-button>
        </div>
        <LineChart :data="industryChartData" :options="industryChartOptions" class="w-full h-48" />
      </div>
      <div class="bg-white rounded-lg shadow p-3 pb-5 chart-container">
        <div class="flex justify-between">
          <p class="font-semibold mb-1">一般公共预算收入及增速</p>
          <a-button type="primary" @click="createPublicBudgetReport"
            >生成报告
            <a-modal v-model:visible="createPublicBudgetReportModal" title="一般公共预算报告">
              <p>暂无数据...</p>
            </a-modal>
          </a-button>
        </div>
        <LineChart :data="budgetChartData" :options="budgetChartOptions" class="w-full h-48" />
      </div>
      <div class="bg-white rounded-lg shadow p-3 pb-5 chart-container">
        <div class="flex justify-between">
          <p class="font-semibold mb-1">社会消费品零售总额</p>
          <a-button type="primary" @click="createSocialConsumptionReport"
            >生成报告
            <a-modal v-model:visible="createSocialConsumptionReportModal" title="社会消费品报告">
              <p>暂无数据...</p>
            </a-modal>
          </a-button>
        </div>
        <LineChart :data="retailChartData" :options="retailChartOptions" class="w-full h-48" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const gdpModal = ref(false)
const industryTrendAnalysisModal = ref(false)
const createPublicBudgetReportModal = ref(false)
const createSocialConsumptionReportModal = ref(false)
// 一般公共预算收入及增速图表
const budgetChartData = ref({
  labels: ['2020年', '2021年', '2022年', '2023年', '2024年'],
  datasets: [
    {
      label: '一般公共预算收入',
      data: [226.48, 255.06, 265.56, 264.36, 265.3],
      borderColor: 'rgba(0, 123, 255, 1)',
      backgroundColor: 'rgba(0, 123, 255, 0.2)',
      fill: true,
    },
  ],
})

const budgetChartOptions = ref({
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    x: {
      grid: {
        color: 'rgba(0, 0, 0, 0.05)',
      },
      ticks: {
        color: '#666',
      },
    },
    y: {
      beginAtZero: true,
      grid: {
        color: 'rgba(0, 0, 0, 0.05)',
      },
      ticks: {
        color: '#666',
        callback: function (value) {
          return value + '亿' // 左侧y轴显示"亿"单位
        },
      },
    },
  },
  plugins: {
    legend: {
      labels: {
        color: '#333',
      },
    },
    tooltip: {
      mode: 'index',
      intersect: false,
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      titleColor: '#333',
      bodyColor: '#666',
      borderColor: 'rgba(200, 200, 200, 1)',
      borderWidth: 1,
      padding: 10,
      boxPadding: 5,
      usePointStyle: true,
      callbacks: {
        label: function (context) {
          let label = context.dataset.label || ''
          if (label) {
            label += ': '
          }
          if (context.parsed.y !== null) {
            label += context.parsed.y + '亿'
          }
          return label
        },
      },
    },
  },
})

// 社会消费品零售总额图表
const retailChartData = ref({
  labels: ['2020年', '2021年', '2022年', '2023年', '2024年'],
  datasets: [
    {
      label: '社会消费品零售总额',
      data: [571.2, 945.8, 962.83, 1032.02, 1033.05],
      backgroundColor: 'rgba(255, 206, 86, 0.8)', // 黄色系柱状图
      borderColor: 'rgba(255, 206, 86, 1)',
      borderWidth: 1,
      type: 'bar', // 柱状图类型
      borderRadius: 4, // 柱子圆角
      barPercentage: 0.6, // 柱子宽度比例
      categoryPercentage: 0.7, // 类目间距
    },
    {
      label: '增速(%)',
      data: [8.2, 10.1, 2.3, 7.2, 1.2], // 假设的增速数据（需根据实际情况修改）
      backgroundColor: 'rgba(75, 192, 192, 0.8)', // 青色折线图
      borderColor: 'rgba(75, 192, 192, 1)',
      borderWidth: 2,
      type: 'line', // 折线图类型
      fill: false, // 不填充折线区域
      tension: 0.3, // 折线弧度
      pointRadius: 4, // 数据点半径
      pointBackgroundColor: '#fff', // 点的背景色
      pointBorderColor: 'rgba(75, 192, 192, 1)', // 点的边框色
      pointBorderWidth: 2, // 点的边框宽度
      yAxisID: 'y1', // 关联到第二个y轴
    },
  ],
})

const retailChartOptions = ref({
  responsive: true,
  maintainAspectRatio: false,
  interaction: {
    mode: 'index',
    intersect: false,
  },
  scales: {
    x: {
      grid: {
        display: false, // 隐藏x轴网格线
      },
      ticks: {
        color: '#666',
      },
    },
    y: {
      beginAtZero: true,
      grid: {
        color: 'rgba(0, 0, 0, 0.05)',
      },
      ticks: {
        color: '#666',
        callback: function (value) {
          return value + '亿' // 总额单位
        },
      },
    },
    y1: {
      beginAtZero: true,
      position: 'right', // 右侧y轴
      grid: {
        color: 'rgba(0, 0, 0, 0.05)',
        drawOnChartArea: false, // 不绘制在图表区域内
      },
      ticks: {
        color: '#666',
        callback: function (value) {
          return value + '%' // 增速百分比
        },
      },
    },
  },
  plugins: {
    legend: {
      labels: {
        color: '#333',
      },
    },
    tooltip: {
      mode: 'index',
      intersect: false,
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      titleColor: '#333',
      bodyColor: '#666',
      borderColor: 'rgba(200, 200, 200, 1)',
      borderWidth: 1,
      padding: 10,
      boxPadding: 5,
      usePointStyle: true,
      callbacks: {
        label: function (context) {
          let label = context.dataset.label || ''
          if (label) {
            label += ': '
          }
          if (context.parsed.y !== null) {
            label += context.dataset.label.includes('增速')
              ? context.parsed.y + '%'
              : context.parsed.y + '亿'
          }
          return label
        },
      },
    },
  },
})
// 生产总值图表
const gdpChartData = ref({
  labels: ['2020年', '2021年', '2022年', '2023年', '2024年'],
  datasets: [
    {
      label: '生产总值(亿)', // 添加单位到标签
      data: [2, 4, 4, 7, 5, 6],
      backgroundColor: 'rgba(0, 123, 255, 0.8)',
      borderColor: 'rgba(0, 123, 255, 1)',
      borderWidth: 1,
      type: 'bar',
      borderRadius: 4,
      barPercentage: 0.6,
      categoryPercentage: 0.7,
      yAxisID: 'y', // 关联到左侧y轴
    },
    {
      label: '增速(%)', // 添加单位到标签
      data: [5, 7, 5, 8, 5, 8],
      backgroundColor: 'rgba(255, 99, 132, 0.8)',
      borderColor: 'rgba(255, 99, 132, 1)',
      borderWidth: 2,
      type: 'line',
      fill: false,
      tension: 0.3,
      pointRadius: 4,
      pointBackgroundColor: '#fff',
      pointBorderColor: 'rgba(255, 99, 132, 1)',
      pointBorderWidth: 2,
      yAxisID: 'y1', // 关联到右侧y轴
    },
  ],
})

const gdpChartOptions = ref({
  responsive: true,
  maintainAspectRatio: false,
  interaction: {
    mode: 'index',
    intersect: false,
  },
  scales: {
    x: {
      grid: {
        display: false,
      },
      ticks: {
        color: '#666',
      },
    },
    y: {
      position: 'left', // 左侧y轴
      beginAtZero: true,
      grid: {
        color: 'rgba(0, 0, 0, 0.05)',
      },
      ticks: {
        color: '#666',
        callback: function (value) {
          return value + '亿' // 左侧y轴显示"亿"单位
        },
      },
    },
    y1: {
      position: 'right', // 右侧y轴
      beginAtZero: true,
      grid: {
        color: 'rgba(0, 0, 0, 0.05)',
        drawOnChartArea: false, // 不绘制在图表区域内
      },
      ticks: {
        color: '#666',
        callback: function (value) {
          return value + '%' // 右侧y轴显示"%"单位
        },
      },
    },
  },
  plugins: {
    legend: {
      labels: {
        color: '#333',
      },
    },
    tooltip: {
      mode: 'index',
      intersect: false,
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      titleColor: '#333',
      bodyColor: '#666',
      borderColor: 'rgba(200, 200, 200, 1)',
      borderWidth: 1,
      padding: 10,
      boxPadding: 5,
      usePointStyle: true,
      callbacks: {
        label: function (context) {
          let label = context.dataset.label || ''
          if (label) {
            label += ': '
          }
          if (context.parsed.y !== null) {
            // 根据标签包含的关键词自动添加单位
            if (label.includes('增速')) {
              label += context.parsed.y + '%'
            } else {
              label += context.parsed.y + '亿'
            }
          }
          return label
        },
      },
    },
  },
})

// 产业结构趋势分析图表
const industryChartData = ref({
  labels: ['2020年', '2021年', '2022年', '2023年', '2024年'],
  datasets: [
    {
      label: '第一产业',
      data: [10, 12, 11, 13, 12],
      borderColor: 'rgba(0, 123, 255, 1)',
      backgroundColor: 'rgba(0, 123, 255, 0.2)',
      fill: true,
    },
    {
      label: '第二产业',
      data: [30, 32, 31, 33, 32],
      borderColor: 'rgba(255, 99, 132, 1)',
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      fill: true,
    },
    {
      label: '第三产业',
      data: [50, 52, 51, 53, 52],
      borderColor: 'rgba(75, 192, 192, 1)',
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      fill: true,
    },
  ],
})
const industryChartOptions = ref({
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    x: {
      grid: {
        color: 'rgba(0, 0, 0, 0.05)',
      },
      ticks: {
        color: '#666',
      },
    },
    y: {
      beginAtZero: true,
      grid: {
        color: 'rgba(0, 0, 0, 0.05)',
      },
      ticks: {
        color: '#666',
        callback: function (value) {
          return value + '亿' // 左侧y轴显示"亿"单位
        },
      },
    },
  },
  plugins: {
    legend: {
      labels: {
        color: '#333',
      },
    },
    tooltip: {
      mode: 'index',
      intersect: false,
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      titleColor: '#333',
      bodyColor: '#666',
      borderColor: 'rgba(200, 200, 200, 1)',
      borderWidth: 1,
      padding: 10,
      boxPadding: 5,
      usePointStyle: true,
      callbacks: {
        label: function (context) {
          let label = context.dataset.label || ''
          if (label) {
            label += ': '
          }
          if (context.parsed.y !== null) {
            label += context.parsed.y + '亿'
          }
          return label
        },
      },
    },
  },
})

// 生产总值生成报告
const generateGDPReport = () => {
  gdpModal.value = true
}
// 产业结构趋势分析生成报告
const generateIndustrialTrendAnalysisReport = () => {
  industryTrendAnalysisModal.value = true
}
// 一般公共预算生成报告
const createPublicBudgetReport = () => {
  createPublicBudgetReportModal.value = true
}
// 社会消费品生成报告
const createSocialConsumptionReport = () => {
  createSocialConsumptionReportModal.value = true
}
</script>

<style scoped>
canvas {
  width: 100% !important;
  height: 200px !important;
}

.chart-container {
  height: 250px; /* 设置固定高度 */
}
</style>
